import { View } from '@tarojs/components';
import { AtButton } from 'taro-ui';
import cssModule from './index.module.scss';

/**
 * @description 操作栏
 * @author Shawn
 */

// 组件接收的参数
interface OperationButton {
  text: string;
  type?: 'primary' | 'secondary';
  onClick: () => void;
}

interface DefaultPageProps {
  buttons: OperationButton[];
  children?: any;
}

export default function Operation(props: DefaultPageProps) {
  const { buttons, children } = props;
  if (buttons.length === 2) {
    return (
      <View className={cssModule.container}>
        {children && <View className={cssModule.containerChild}>{children}</View>}
        <View className={cssModule.containerBox}>
          <AtButton type={buttons[0].type} onClick={buttons[0].onClick}>
            {buttons[0].text}
          </AtButton>
          <View className={cssModule.btnWidth} />
          <AtButton type={buttons[1].type} onClick={buttons[1].onClick}>
            {buttons[1].text}
          </AtButton>
        </View>
      </View>
    );
  }
  return (
    <View className={cssModule.container}>
      <View className={cssModule.containerBox}>
        {buttons.map((btn, idx) => (
          <AtButton key={idx} type={btn.type} onClick={btn.onClick}>
            {btn.text}
          </AtButton>
        ))}
      </View>

    </View>
  );
}
